<template>
    <f7-page>
        <f7-navbar title="货物运输进度" back-link="返回"></f7-navbar>

     <div class="bg-white ">
                        <div class="item item-transdetail">
                            <h3 class="text-black bold">{{this.statusDtl.amount_total}}吨
                                <span class="float-right">
                                    已指派{{vojo.yzp}}%</span>
                            </h3>
                            <div class="clearfix gap-5"></div>
                            <progress class="data data-purple" value="0" max="100"></progress>
                            <div class="clearfix gap-5"></div>
                            <div class="text-black">
                                已完成指派{{vojo.yys}}吨
                                <span class="float-right">未完成指派{{vojo.wwczp}}吨</span>
                            </div>
                        </div>
                    </div>

                    <f7-block class="text-align-center">
                                <span>共计{{vojo.carsNum}}辆车</span>
                    </f7-block>



        <div class="z_item">
            <div>
                <ul>
                    <template v-for="status,index in statusDtl">
                        <li v-for="item in statusDtl[index]" v-if="typeof statusDtl[index]=='object' && statusDtl[index].length>0">
                            <img src='../../assets/img/car.png' class="car">
                            <span>{{item.truck_num}}</span>
                            <span class="z_item_rt">{{index | orderStatus()}}</span>
                        </li>
                    </template>
                </ul>
            </div>
        </div>


    </f7-page>
</template>

<script>
    import F7Button from "framework7-vue/src/components/button";
    export default {
        name: 'transportProgress',
        data: function () {
            return {
                orderDtl:{},
                statusDtl:{},
                vojo:{
                    yys:0
                }
            }
        },
        components: {
            F7Button
        },
        methods: {
            //物流运输进度
            async passDriverStatus(){
                let param={order_id:this.$f7Route.params.tradeid}
                let passDriverStatusRes=await this.LineService.passDriverStatus(param);
                this.statusDtl=passDriverStatusRes.data.data;
                let yys=this.statusDtl.amount_effective+this.statusDtl.amount_complete;
                this.vojo={
                    yys:yys,//已运输吨数
                    yzp:(yys/this.statusDtl.amount_total)*100,//已指派百分比
                    wwczp:this.statusDtl.amount_total-yys,//未完成指派
                    carsNum:this.statusDtl.demand_driver.length+this.statusDtl.plan_driver.length+this.statusDtl.order_effective.length+this.statusDtl.order_complete.length+this.statusDtl.overdue_driver.length
                }
            },

            //订单详情
            async orderDetails(){
                let param={order_id:this.$f7Route.params.tradeid}
                let orderDetailsRes=await this.LineService.orderDetails(param);
                this.orderDtl=orderDetailsRes.data.data
                console.log(this.orderDtl)
            }
        },
        created () {
            this.orderDetails()
            this.passDriverStatus()
        }
    }
</script>

<style scoped>
.ios .page {
    background: #f5f5f5;
  }
.bg-white {
    background: #fff;
}
.item-transdetail {
    padding: 12px 15px;
}
.item {
    font-size: 14px;
    border-color: #f5f5f5;
}
.item h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
}
.text-black {
    color: #333;
}
.bold {
    font-weight: bold;
}
.gap-5 {
    margin-top: 5px;
}
.clearfix {
    clear: both;
}
progress.data {
    width: 100%;
    height: 5px;
    margin-top: 5px;
     background: #f5f5f5;
    color: #A76CF5;
    border-radius: 5px;
    margin: 10px 0 0 0;
    display: block;
}
.text-black {
    color: #333;
}
.ios .block {
    margin: 20px 0;
}
.z_item ul {
  padding-left: 0;
  font: inherit;
  font-size: 100%;
  font-family: '微软雅黑';
  color: #666;
}
.z_item li {
  background: white;
  padding-left: 10px;
  border-bottom: 1px solid #f5f5f5;
  line-height: 40px;
}
.z_item .z_item_rt {
  float: right;
  margin-right: 10px;
  color: #A76CF5;
  font-weight: normal;
}
.car {
  max-width: 24px;
  max-height: 24px;
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align:middle;
  margin-right: 5px;
}
</style>

